/*
  学习目标：useEffect模拟生命周期 - 第二个参数小结
  语法： 
    1. useEffect(() => {}, []) 挂载后
    2. useEffect(() => {}, [依赖项]) :  挂载更新二合一
    3. useEffect(() => {}) 👎 会监听所有状态的变化

*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('hello React');

  // ✅ 挂载后
  // useEffect(() => {
  //   console.log('挂载后，只执行一次  ----->  ');
  // }, []);

  // ✅代表： 挂载更新二合一
  // 依赖项： 只监听依赖项的变化
  useEffect(() => {
    console.log('count  ----->  ', count);
  }, [count]);

  // 代表： 挂载更新二合一
  // 不写依赖项： 监听所有的数据变化
  // 👎
  useEffect(() => {
    console.log('count  ----->  ', count);
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>点我+1</button>

      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </div>
  );
}
